<template>
  <view>
    <u-navbar :is-back="true" title="修改密码" :background="background" back-icon-color="#ffffff" title-color="#ffffff">
    </u-navbar>
    <view class="content">
      <view>
        <u-form :model="user" ref="uForm" :border-bottom="false">
          <u-form-item label="旧密码:" :border-bottom="false" prop="username" label-width="6em">
            <u-input v-model="user.username" height="78" type="text" :border="border" />
          </u-form-item>
          <u-form-item label="新密码:" :border-bottom="false" prop="password" label-width="6em">
            <u-input v-model="user.password" type="password" height="78" :password-icon="passwordIcon"
              :border="border" />
          </u-form-item>
          <u-form-item label="重复新密码:" :border-bottom="false" prop="password1" label-width="6em">
            <u-input v-model="user.password1" type="password" height="78" :password-icon="passwordIcon"
              :border="border" />
          </u-form-item>
        </u-form>

        <view class="button-demo">
          <u-button :ripple="true" @click="login()" size="default" type="primary" shape="square">提交</u-button>
        </view>
        <view class="footer">
          <text class="change">联系客服</text>
        </view>
        <view>
          <u-toast ref="uToast" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {

    data() {
      return {
        user: {
          username: '',
          password: '',
          password1: ''
        },
        passwordIcon: true,
        border: true,
        background: {
          backgroundColor: '#2979FF',

        },
      }
    },
    methods: {

      login() {
        var username = this.user.username;
        var password = this.user.password;
        var password1 = this.user.password1;
        console.log(password);
        console.log(password1);
        if (username == '' || password == '' || password1 == '') {
          this.$refs.uToast.show({
            title: '不能为空',
            type: 'warning'
          });
          return;
        }

        if (password == password1) {
          this.$refs.uToast.show({
            title: '修改成功',
            type: 'success',
            url: ''
          });
        } else {
          this.$refs.uToast.show({
            title: '新密码不一致',
            type: 'error'
          });
        }
      }
    }
  }
</script>

<style>
  .myinput {
    width: 16em;
    margin-bottom: 1em;
    padding: 0 2em;
    line-height: 3.2em;
    /* 和height相同时会垂直居中 */
    height: 3.2em;
    border: #e4e4e4 1px solid;
    border-radius: 1.6em;
    background-color: #ededed;

  }

  .footer {
    margin-top: 40rpx;
    margin-bottom: 12rpx;
    color: black;
    font-weight: 500;
    margin-left: 220rpx;
  }

  .footer .change {
    display: inline-block;
    float: ;
  }

  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80rpx;
  }

  .button-demo {
    margin-top: 80rpx;
    text-align: center;
  }
</style>
